<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { Input } from 'ant-design-vue';
import { parseTime } from '@/utils';
import { vcpget, vcppost } from '@/service/api/modules/erp';

import Modal from '@/components/common/modal.vue';

import Search from './modules/search.vue';
const searchParams = ref({
  locationId: '',
  time: ''
});

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});
const columnsLine = ref([
  {
    key: 'line',
    dataIndex: 'line',
    title: '制程线',
    align: 'center',
    checked: true
  },
  {
    key: 'width',
    dataIndex: 'width',
    title: '板宽(mm)',

    align: 'center',
    checked: true,
    customRender: ({ record }) => {
      return (
        <Input
          style="height: 22px !important;"
          value={record.width}
          onChange={e => {
            record.width = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'height',
    dataIndex: 'height',
    title: '板长(mm)',

    align: 'center',
    checked: true,
    customRender: ({ record }) => {
      return (
        <Input
          style="height: 22px !important;"
          value={record.height}
          onChange={e => {
            record.height = e.target.value;
          }}
        ></Input>
      );
    }
  }
]);
const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true
  },
  {
    key: 'product',
    dataIndex: 'product',
    title: '生产型号',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'line',
    dataIndex: 'line',
    title: '制程线',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'copperPlatingTime',
    dataIndex: 'copperPlatingTime',
    title: '电镀时间(m)',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'cycleTime',
    dataIndex: 'cycleTime',
    title: '循环时间(m)',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdPositive1',
    dataIndex: 'chAsdPositive1',
    title: '正面电流',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'chAsdBehind1',
    dataIndex: 'chAsdBehind1',
    title: '反面电流',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createUser',
    dataIndex: 'createUser',
    title: '创建人',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lmTime',
    dataIndex: 'lmTime',
    title: '修改时间',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.lmTime == null) {
        return null;
      }
      return parseTime(record.lmTime);
    }
  },
  {
    key: 'lmUser',
    dataIndex: 'lmUser',
    title: '修改人',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  }

  // {
  //   key: 'siteId',
  //   dataIndex: 'siteId',
  //   title: '工厂代码',
  //   width: 120,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // }
]);
const tableDataLine = ref([]);
function lineList(val) {
  if (val.length > 0) {
    tableDataLine.value = [];
    val.forEach(el => {
      tableDataLine.value.push({
        line: el,
        width: '',
        height: ''
      });
    });
  } else {
    tableDataLine.value = [];
  }
}
const formState = ref({});
const detailsVisibleQrcode = ref(false);

const tableData = ref([]);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);
const options = ref([
  { value: 'A', label: 'A' },
  { value: 'B', label: 'B' },
  { value: 'C', label: 'C' },
  { value: 'D', label: 'D' },
  { value: 'E', label: 'E' },
  { value: 'F', label: 'F' },
  { value: 'G', label: 'G' },
  { value: 'H', label: 'H' }
]);
const optionsType = ref([{ label: 'WorkingCenter' }, { label: 'Storage' }]);
const optionsName = ref([{ label: 'HBJL' }]);

function getData() {
  loading.value = true;
  if (searchParams.value.time?.length > 0) {
    searchParams.value.startTime = searchParams.value.time[0];
    searchParams.value.endTime = searchParams.value.time[1];
  } else {
    delete searchParams.value.time;
  }
  delete searchParams.value.time;
  vcpget('/mes/pnSpecial/getPnSpecialControlJl', {
    pageSize: pagination.pageSize,
    pageNum: pagination.current,

    ...searchParams.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
const selectedRowKeys = ref([]);
const formTit = ref('');
function tableSelectChange(val) {
  selectedRowKeys.value = val;
}
function manualSyncing() {
  formState.value = {};

  tableDataLine.value = [];
  formState.value.siteId = 'HBJL';

  formTit.value = '制程管制新增';
  detailsVisibleQrcode.value = true;
}
function boundUpdata(val) {
  formState.value.list = tableDataLine.value;
  const srt = ref(0);
  formState.value.list.map(el => {
    if (!el.width || !el.height) {
      srt.value = 1;
    } else {
      srt.value = 0;
    }
  });
  if (srt.value == 1) {
    console.log(123);
    return window.$message?.success('请先检查线别长宽是否修改');
  }
  if (val == '制程管制新增') {
    vcppost('/mes/pnSpecial/add', formState.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('新增成功');
        detailsVisibleQrcode.value = false;
        getData();
      }
    });
  } else {
    vcppost('/mes/pnSpecial/update', formState.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('修改成功');
        detailsVisibleQrcode.value = false;
        getData();
      }
    });
  }
}
function updateSyncing() {
  if (selectedRowKeys.value.length !== 1) {
    return window.$message?.error('请选择一条数据');
  }
  const selectData = tableData.value.filter(item => selectedRowKeys.value.includes(item.pnSpecialControlUuid));

  formTit.value = '制程管制修改';
  formState.value = selectData[0];
  tableDataLine.value = selectData[0].list;
  detailsVisibleQrcode.value = true;
}
function deleteSyncing() {
  if (selectedRowKeys.value.length == 0) {
    return window.$message?.error('请选择数据');
  }
  const deleteData = selectedRowKeys.value;
  vcppost('/mes/pnSpecial/deleteBath', deleteData).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('删除成功');

      getData();
    }
  });
}
const currentRowId = ref(null);
function onDblclick(record) {
  return {
    style: {
      background: record.pnSpecialControlUuid === currentRowId.value ? '#BAEAFA' : ''
    },
    onClick: () => {
      currentRowId.value = record.pnSpecialControlUuid;
    },
    class: record.pnSpecialControlUuid === currentRowId.value ? 'jl-table-row-selected' : ''
  };
}
getData();

function search() {
  pagination.current = 1;
  getData();
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="search()" @search="search()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="manualSyncing">
          <span class="ml-3px">新增</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="updateSyncing">
          <span class="ml-3px">修改</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="deleteSyncing">
          <span class="ml-3px">删除</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :custom-row="onDblclick"
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="pnSpecialControlUuid"
        :default-expand-all-rows="true"
        :scroll="{ x: 'auto', y: 'auto' }"
        :pagination="pagination"
        class="h-full"
        :row-height="23"
      />
      <Modal
        v-model:visible="detailsVisibleQrcode"
        :destroy-on-close="true"
        :centered="true"
        :title="formTit"
        width="950px"
        height="850px"
      >
        <div class="event-form">
          <AForm :model="formState" name="basic" :label-col="{}" autocomplete="off">
            <ARow :gutter="15">
              <!--
 <ACol :span="12">
                <AFormItem label="工厂代码" name="siteId" :rules="[{ required: true, message: '请输入工厂代码!' }]">
                  <AInput v-model:value="formState.siteId" disabled allow-clear />
                </AFormItem>
              </ACol>
-->
              <ACol :span="12">
                <AFormItem label="产品" name="product" :rules="[{ required: true, message: '请输入产品!' }]">
                  <AInput v-model:value="formState.product" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  :label-col="{}"
                  label="lot卡号"
                  name="lotNo"
                  :rules="[{ required: true, message: '请输入lot卡号!' }]"
                >
                  <AInput v-model:value="formState.lotNo" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  label="电镀时间()"
                  name="copperPlatingTime"
                  :rules="[{ required: true, message: '请输入电镀时间!' }]"
                >
                  <AInput v-model:value="formState.copperPlatingTime" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  :label-col="{}"
                  label="循环时间(m)"
                  name="cycleTime"
                  :rules="[{ required: true, message: '请输入循环时间!' }]"
                >
                  <AInput v-model:value="formState.cycleTime" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  label="正面电流"
                  name="chAsdPositive1"
                  :rules="[{ required: true, message: '请输入正面电流!' }]"
                >
                  <AInput v-model:value="formState.chAsdPositive1" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  label="反面电流"
                  name="chAsdBehind1"
                  :rules="[{ required: true, message: '请输入反面电流!' }]"
                  :label-col="{}"
                >
                  <AInput v-model:value="formState.chAsdBehind1" allow-clear />
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem
                  :label-col="{}"
                  label="板厚(mm)"
                  name="plateThickness"
                  :rules="[{ required: true, message: '请输入板厚!' }]"
                >
                  <AInput v-model:value="formState.plateThickness" allow-clear />
                </AFormItem>
              </ACol>

              <ACol :span="12">
                <AFormItem label="制程线" name="line" :label-col="{}">
                  <ASelect
                    v-model:value="formState.line"
                    mode="multiple"
                    placeholder="请选择制程线"
                    :options="options"
                    @change="lineList(formState.line)"
                  />
                </AFormItem>
              </ACol>
              <ACol :span="24">
                <STable
                  :columns="columnsLine"
                  :data-source="tableDataLine"
                  size="small"
                  bordered
                  :loading="loading"
                  row-key="pnSpecialControlUuid"
                  :default-expand-all-rows="true"
                  :scroll="{ y: 'auto' }"
                  :pagination="false"
                  :height="300"
                  class="h-300px"
                />
              </ACol>
            </ARow>
          </AForm>
        </div>

        <template #footer>
          <div class="modal-footer">
            <AButton type="primary" @click="boundUpdata(formTit)">保存</AButton>
            <AButton @click="detailsVisibleQrcode = false">关闭</AButton>
          </div>
        </template>
      </Modal>
    </ACard>
  </div>
</template>

<style></style>
